<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#main {
				width: 600px;
				height: 800px;
				border: 1px solid #ccc;
				position: relative;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.plane {
				width: 50px;
				height: 50px;
				position: relative;
				left: 50%;
				top: 750px;
			}
			
			.plane img {
				width: 100%;
				height: 100%;
			}
			
			.bullet {
				width: 25px;
				height: 25px;
				position: absolute;
				z-index: 2;
				margin: 0 auto;
				top: 0;
				left: 25%;
			}
			
			.bullet img {
				width: 100%;
				height: 100%;
			}
			
			.enemy {
				width: 50px;
				height: 50px;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
			}
			
			.enemy img {
				width: 100%;
				height: 100%;
			}
		</style>

	</head>

	<body>
		<div id="main">
			<div class="plane"><img src="img/plane.png" /></div>
		</div>
		<script>
			var e = window.event || e;
			//生成飞机
			var main = document.getElementById('main');
			var content = document.getElementsByClassName('plane')[0];
			(function() {
				window.onkeydown = function(e) {
					userInput(e);
				}
				goBullet();
				enemy();
				intersection();
			})();

			function goBullet() {
				setInterval(function() {
					//生成子弹
					var bullet = document.createElement("div");
					bullet.setAttribute('class', 'bullet');
					var img = document.createElement("img");
					img.setAttribute('src', 'img/bullet.png');
					bullet.appendChild(img);
					content.appendChild(bullet);
					//向上发射
					var bulletArray = document.getElementsByClassName('bullet');
					for(var i = 0; i < bulletArray.length; i++) {
						bulletArray[i].style.top = bulletArray[i].offsetTop - 30 + "px";
						if(bulletArray[i].offsetTop < -750) {
							console.log('超过页面了')
							content.removeChild(bulletArray[i]);
						}
					}

					//console.log(bullet.style.top);
					//console.log(bullet.offsetTop);
					/*if(bullet.offsetTop > 800) {
						console.log('超过页面了')
						content.removeChild(bullet);

					}*/
				}, 1000)

			}
			//生成指定范围随机数//四舍五入     
			function RandomNumBoth(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				var num = Min + Math.round(Rand * Range);
				return num;
			}
			//生成敌人
			function enemy() {
				setInterval(function() {
					//生成敌人
					var enemy = document.createElement("div");
					enemy.setAttribute('class', 'enemy');
					var img = document.createElement("img");
					img.setAttribute('src', 'img/enemy.png');
					enemy.style.top = "0";
					enemy.style.left = RandomNumBoth(0, 5) * 100 + "px";
					enemy.appendChild(img);
					main.appendChild(enemy);
					//敌人向下移动
					var enemyArray = document.getElementsByClassName('enemy');
					for(var i = 0; i < enemyArray.length; i++) {
						enemyArray[i].style.top = enemyArray[i].offsetTop + 10 + "px";
						if(enemyArray[i].offsetTop > 600) {
							console.log('敌人冲过终点了冲过终点了')
							main.removeChild(enemyArray[i]);
						}
					}
					//移动到终点则消失
					/*if(enemy.offsetTop > 600) {
						console.log('超过页面了')
						main.removeChild(enemy);
					}*/
				}, 1000);
			}

			function userInput(e) {
				//因为用户的按钮，和飞机的移动是相反的，用户按左，飞机是像右移，所以是相反的
				//左				
				if(e.keyCode == 37) {
					if(content.style.left == '0px') {
						return
					}
					content.style.left = content.offsetLeft - 10 + "px";
				}
				//上
				if(e.keyCode == 38) {
					if(content.style.top == '0px') {
						return
					}
					content.style.top = content.offsetTop - 10 + "px";
				}
				//右
				if(e.keyCode == 39) {

					if(content.style.left == '550px') {
						return
					}
					content.style.left = content.offsetLeft + 10 + "px";
				}
				//下
				if(e.keyCode == 40) {

					if(content.style.top == '750px') {
						return
					}
					content.style.top = content.offsetTop + 10 + "px";
				}
			}

			function intersection() {
				setInterval(function() {
					var bulletArray = document.getElementsByClassName('bullet');
					var enemyArray = document.getElementsByClassName('enemy');
					
					//定义子弹
					var t1_bulletArray = new Array();
					var l1_bulletArray = new Array();
					var r1_bulletArray = new Array();
					var b1_bulletArray = new Array();
					//定义敌人,定义，不能放在for循环里，不能var t1_bulletArray[i] = bulletArray[i].offsetTop;会报错
					var t2_enemyArray = new Array();
					var l2_enemyArray = new Array();
					var r2_enemyArray = new Array();
					var b2_enemyArray = new Array();
					//定义合并数组
					var t1_testArray = new Array();
					var l1_testArray = new Array();
					var r1_testArray = new Array();
					var b1_testArray = new Array();
					for(var i = 0; i < bulletArray.length; i++) {
						//定义四个坐标的子弹
						t1_bulletArray[i] = bulletArray[i].offsetTop;
						l1_bulletArray[i] = bulletArray[i].offsetLeft;
						r1_bulletArray[i] = bulletArray[i].offsetLeft + bulletArray[i].offsetWidth;
						b1_bulletArray[i] = bulletArray[i].offsetTop + bulletArray[i].offsetHeight;
						for(var j = 0; j < enemyArray.length; j++) {
							//定义四个坐标的敌人飞机
							t2_enemyArray[j] = enemyArray[j].offsetTop;
							l2_enemyArray[j] = enemyArray[j].offsetLeft;
							r2_enemyArray[j] = enemyArray[j].offsetLeft + enemyArray[j].offsetWidth;
							b2_enemyArray[j] = enemyArray[j].offsetTop + enemyArray[j].offsetHeight;

							//飞机和子弹，数组合成
							t1_testArray = t2_enemyArray.concat(t1_bulletArray);
							l1_testArray = l2_enemyArray.concat(l1_bulletArray);
							r1_testArray = r2_enemyArray.concat(r1_bulletArray);
							b1_testArray = b2_enemyArray.concat(b1_bulletArray);
							//排序，然后判断是否有相同的
							var sort_t1_testArray = bubbleSort(t1_testArray);
							var sort_l1_testArray = bubbleSort(l1_testArray);
							var sort_r1_testArray = bubbleSort(r1_testArray);
							var sort_b1_testArray = bubbleSort(b1_testArray);
							
							console.log(t1_testArray)
							debugger
							for(var x = 0; x < t1_testArray.length; x++) {
								if(sort_t1_testArray[x] == sort_t1_testArray[x + 1]) {
									content.removeChild(bulletArray[x]);
									main.removeChild(enemyArray[x]);
									x--;
								}
							}
							for(var x = 0; x < l1_testArray.length; x++) {

								if(sort_l1_testArray[x] == sort_l1_testArray[x + 1]) {
									content.removeChild(bulletArray[x]);
									main.removeChild(enemyArray[x]);
									x--;
								}

							}
							for(var x = 0; x < r1_testArray.length; x++) {

								if(sort_r1_testArray[x] == sort_r1_testArray[x + 1]) {
									content.removeChild(bulletArray[x]);
									main.removeChild(enemyArray[x]);
									
									x--;

								}

							}
							for(var x = 0; x < b1_testArray.length; x++) {

								if(sort_b1_testArray[x] == sort_b1_testArray[x + 1]) {
									content.removeChild(bulletArray[x]);
									main.removeChild(enemyArray[x]);
									x--;

								}

							}
							/*if(b1_bulletArray[i] < t2_enemyArray[j] || l1_bulletArray[i] > r2_enemyArray[j] || t1_bulletArray[i] > b2_enemyArray[j] || r1_bulletArray[i] < l2_enemyArray[j]) {
								// 表示没碰上
								
							} else {
								content.removeChild(bulletArray[i]);
								main.removeChild(enemyArray[i]);
							}*/
						}
					}
				}, 1000)
			}
			//冒泡排序
			var temp;
			function bubbleSort(arr) {
				for(var i = 0; i < arr.length; i++) {
					for(var j = i + 1; j < arr.length; j++) {
						if(arr[i] > arr[j]) {
							temp = arr[i];
							arr[i] = arr[j];
							arr[j] = temp;
						}
					}
				}
				return arr;
			}
		</script>
	</body>

</html>